<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
       *{list-style-type: decimal}
        li{
/*            background: blue;*/
        }
    </style>
</head>

<body>
    <input type="button" id="Btn1" value="增加标签"/>
    <input type="text" id="txt1"/>
    <input type="button" id="Btn2" value="删除标签"/>
    <ul>
        <li>这个只是试验一下,能不能隐藏?点击这个按钮,大声的告诉我.</li>
        <li>aass</li>
        </ul>
    
    <script>
        window.onload=function()
        {
            var oBtn=document.getElementById('Btn1');
            var obtn=document.getElementById('Btn2');
            //var oUl=document.getElementById('Ui1');
            var oUl=document.getElementsByTagName('ul')[0];
            var oTxt=document.getElementById('txt1');
            var oUls=oUl.getElementsByTagName('li');
            var i=0;
            oBtn.onclick=function()
            {
                var oLi=document.createElement('li');//创建li标签
                oLi.innerHTML=oTxt.value;
                if(oUls[0])
                {
                    oUl.insertBefore(oLi,oUls[0]);//如果存在li标签,插入其之前
                }
                else
                    {
                        oUl.appendChild(oLi);//如果没有,创建,appendChild函数为在某父容器下插入
                    }
            }
            obtn.onclick=function()//删除第一个
            {
                if(oUls[0])
                {
                    oUl.removeChild(oUls[0])//如果有标签,删除第一个
                }
                else
                    {
                        alert('目前没有标签');//如果没有,提示
                    }
            }
            
            for(i=0;i<=100;i++)
                {
                    oUls[i].onclick=function()
                    {
                        alert(oUl.children);
                        this.style.display='none';
                    }
                }
        }
    </script>
</body>
</html>
